<template>
  <div class="common-dialog">
    <el-dialog
      :title="title"
      width="35%"
      :model-value="props.modelValue"
      @update:modelValue="closeDialog"
    >
      <el-form label-width="80px" class="dialog-form" :model="formData">
        <el-form-item label="序号:">
          <el-input disabled v-model="formData.id" placeholder="系统生成"></el-input>
        </el-form-item>
        <el-form-item label="分类名称:">
          <el-select v-model="formData.categoryId" placeholder="请选择分类">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="属性名称:">
          <el-input v-model="formData.categoryTypeName" placeholder="请输入属性名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBrank">添加</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="js" setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import instance from "@/utils/request";

const title = ref(null);
const options = ref([]);
const formData = ref({
  id: '',
  categoryId: '',
  categoryTypeName: '',
});
// 接收父组件传递的值
const props = defineProps({
  modelValue: Boolean, // v-model 默认属性名
  //接收表格数据
  newFormData: Object,
});
// 定义向父组件发送的事件
const emit = defineEmits(["update:modelValue", "update"]);
watch(() => props.newFormData, (newValue) => {
  if (newValue) {
    console.log('newValue', newValue)
    formData.value = JSON.parse(JSON.stringify(newValue)); // 更新表单数据
    console.log('formData', formData.value)
  }
    // 根据是否有id来设置标题
  if (formData.value.id) {
    title.value = '修改属性';
  } else {
    title.value = '添加属性';
  }
}, { immediate: true });
const getCategory=async()=>{
  const response = await instance.get('/category/getAllCategory');
  if (response.data.code === 200) {
    options.value = response.data.data.records.map(item => ({
      value: item.id,
      label: item.categoryName
    }));
  } else {
    ElMessage.error("获取分类失败！");
  }
}
const saveBrank = async() => {
  if (formData.value.id === undefined || formData.value.id === '') {
    title.value = "添加属性";
    // 添加分类
   const response = await instance.post('/type/add', {
      parentId: formData.value.categoryId,
      typeName: formData.value.categoryTypeName,
   });
   if (response.data.code === 200) {
     ElMessage.success("添加成功！");
     emit("update", response.data);
   } else {
     ElMessage.error("添加失败！");
   }

  } else if (formData.value.id !== undefined && formData.value.id !== '') {
    title.value = '修改属性';
    // 修改属性
    const response = await instance.put('/type/edit', {
      id: formData.value.id,
      parentId: formData.value.categoryId,
      typeName: formData.value.categoryTypeName,
    });
    if (response.data.code === 200) {
      ElMessage.success("修改成功！");
      emit("update", response.data);
    } else {
      ElMessage.error("修改失败！");
    }
  } else if (formData.value.BrankName === "") {
    ElMessage.error("属性名称不能为空！");
  }
};
onMounted(()=>{
  getCategory()
})
// 关闭弹窗方法
const closeDialog = () => {
  emit("update:modelValue", false);
};
</script>
